<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <div class="d-inline-block">
      <v-btn color="info" @click="newItem">新建项目</v-btn>
      <v-btn color="info" @click="up">上移</v-btn>
      <v-btn color="info" @click="down">下移</v-btn>
    </div>
    <v-data-table :headers="table.headers" :items="table.item" class="elevation-1" :total-items="table.totalItems" :pagination.sync="table.pagination" :rows-per-page-items="[10,20,30,40,50]" rows-per-page-text="10">
      <template v-slot:items="props">
        <td><v-checkbox v-model="table.selected[props.index]" primary hide-details @change="changeSelect(props.index)"></v-checkbox></td>
        <td><v-icon small class="mr-2" @click="edit(props.item)">edit</v-icon><v-icon small class="mr-2" @click="deleteDialog.visible=true;deleteDialog.id=props.item.id">delete</v-icon></td>
        <td>{{ props.item.order }}</td>
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.title }}</td>
        <td>{{ props.item.practiceNum }}</td>
        <td>{{ props.item.practiceTime }}</td>
        <td>{{ props.item.intervalTime }}</td>
      </template>
    </v-data-table>
    <sub-dialog :prescriptionId="prescriptionId" ref="subDialog" @create="update" @update="update"/>
    <v-dialog v-model="deleteDialog.visible" persistent max-width="768">
      <v-card>
        <v-card-title class="headline">删除项目</v-card-title>
        <v-card-text>是否确认删除该项？</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="deleteDialog.visible=false">取消</v-btn>
          <v-btn color="green darken-1" flat @click="deleteItem(deleteDialog.id, prescriptionId)">删除</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import subDialog from './SubDialog'
import { getPrescriptionItem, deletePrescriptionItem } from '../../api/prescription'
export default {
  name: 'SubTable',
  components: { subDialog },
  props: {
    prescriptionId: {}
  },
  data: () => ({
    table: {
      selected: [],
      headers: [
        { text: '', sortable: false, value: '', align: 'center' },
        { text: '操作', sortable: false, value: 'action', align: 'center' },
        { text: '序号', sortable: false, value: 'order', align: 'center' },
        { text: '名称', sortable: false, value: 'name', align: 'center' },
        { text: '标题', sortable: false, value: 'title', align: 'center' },
        { text: '组数', sortable: false, value: 'group', align: 'center' },
        { text: '训练时间（秒）', sortable: false, value: 'trainTime', align: 'center' },
        { text: '间歇时间（秒）', sortable: false, value: 'blankTime', align: 'center' }
      ],
      item: []
    },
    dialog: {
      visible: false
    },
    deleteDialog: {
      visible: false,
      id: ''
    }
  }),
  methods: {
    changeSelect (index) {
      if (this.table.selected.length === 0) {
        for (let i = 0; i < this.table.item.length; i++) {
          this.table.selected.push(false)
        }
        this.table.selected[index] = true
      }
      for (let i = 0; i < this.table.selected.length; i++) {
        if (i !== index) {
          this.table.selected[i] = false
        }
      }
    },
    up () {
      let index = -1
      for (let i = 0; i < this.table.selected.length; i++) {
        if (this.table.selected[i]) {
          index = i
          break
        }
      }
      if (index === -1 || index === 0) {
        return
      }
      let temp = this.table.item[index]
      this.table.item[index] = this.table.item[index - 1]
      this.table.item[index - 1] = temp
      this.table.item[index].order = index + 1
      this.table.item[index - 1].order = index
      this.table.selected[index] = false
      this.table.selected[index - 1] = true
      this.table.item.push({})
      this.table.item.pop()
      this.table.selected.push({})
      this.table.selected.pop()
    },
    down () {
      let index = -1
      for (let i = 0; i < this.table.selected.length; i++) {
        if (this.table.selected[i]) {
          index = i
          break
        }
      }
      if (index === -1 || index === this.table.item.length - 1) {
        return
      }
      let temp = this.table.item[index]
      this.table.item[index] = this.table.item[index + 1]
      this.table.item[index + 1] = temp
      this.table.item[index].order = index + 1
      this.table.item[index + 1].order = index + 2
      this.table.selected[index] = false
      this.table.selected[index + 1] = true
      this.table.item.push({})
      this.table.item.pop()
      this.table.selected.push({})
      this.table.selected.pop()
    },
    create (data) {
      data.order = this.table.item.length + 1
      this.table.item.push(data)
    },
    update () {
      getPrescriptionItem(this.prescriptionId).then((res) => {
        this.table.item = []
        if (res.data.data !== null) {
          this.table.item = res.data.data
          for (let i = 0; i < this.table.item.length; i++) {
            this.table.item[i].order = i + 1
          }
        }
        this.table.item.push({})
        this.table.item.pop()
      })
    },
    edit (data) {
      this.$refs.subDialog.get(data)
      this.$refs.subDialog.show()
    },
    newItem () {
      this.$refs.subDialog.show()
      this.$refs.subDialog.clear()
    },
    deleteItem (id, prescriptionId) {
      deletePrescriptionItem(id, prescriptionId).then((res) => {
        this.deleteDialog.visible = false
        this.update()
      })
    }
  }
}
</script>

<style scoped>

</style>
